<template>
  <div class="margin_30">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="mini" @click="goAddAddress(0)">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="addressList"
        border
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column
          label="#"
          align="center"
          width="50"
          type="index"
          fixed="left"
        />
        <!-- prop需要展示的数据部分 -->
        <!-- label表头的名称 -->
        <el-table-column
          prop="addressName"
          label="地址名称"
          align="center"
          width="150"
        />

        <el-table-column
          prop="sendStatus"
          label="默认发货地址"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            默认发货地址
            <el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="changeSend(scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
          align="center"
          width="150"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
          align="center"
          width="150"
        />
        <el-table-column
          prop="detailAddress"
          label="收货人地址"
          width="150"
          align="center"
        />

        <el-table-column
          prop="editorType"
          label="默认收货地址"
          width="160"
          align="center"
        >默认收货地址
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.receiveStatus"
              :active-value="1"
              :inactive-value="0"
              @change="changeReceive(scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="180"
        />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="goEdit(scope.row,1)">编辑</el-button>
            <el-button style="color:red;" size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑/新增 地址弹框 -->
    <el-dialog title="地址详情" :visible.sync="isShowDialog" width="60%" size="mini" @close="handleDialog">
      <el-form :model="addressForm" :rules="rules" label-width="150px" size="mini">
        <el-form-item label="地址名称">
          <el-input v-model="addressForm.addressName " placeholder="地址名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input v-model="addressForm.name" placeholder="收货人姓名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input v-model="addressForm.phone" placeholder="收货人手机号" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="addressForm.postCode " placeholder="邮政编码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货地址">
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addressForm.detailAddress " placeholder="详细地址" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialog">取 消</el-button>
        <el-button type="primary" @click="addAddress">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import { addressList, save, setSendOne, setReceiveOne, companyAddress, update } from '@/api/order/address'
export default {

  data() {
    return {
      // 省市区三级
      options: regionDataPlus,
      selectedOptions: [],
      // 是否显示加载中
      loading: false,
      isShowDialog: false,
      addressList: [],
      addressForm: {},
      rules: {},
      state: 0
    }
  },

  created() {
    this.getAddressList()
  },

  mounted() {

  },

  methods: {
    // 编辑地址
    goEdit(val, state) {
      this.state = state
      this.isShowDialog = true
      this.addressForm = val
      this.selectedOptions = val.cityCode.split(',')
    },
    // 删除地址
    del(id) {
      companyAddress(id)
        .then(res => {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.getAddressList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        })
    },
    // 切换默认状态
    changeSend(e) {
      setSendOne({
        id: e
      }).then(res => {
        this.getAddressList()
      })
    },
    changeReceive(e) {
      setReceiveOne({
        id: e
      }).then(res => {
        this.getAddressList()
      })
    },
    // 获取地址列表
    getAddressList() {
      addressList()
        .then(res => {
          // console.log(res)
          this.addressList = res.data.items
        })
    },
    // 省市区
    handleChange(value) {
      this.addressForm.province = CodeToText[value[0]]
      this.addressForm.city = CodeToText[value[1]]
      this.addressForm.region = CodeToText[value[2]]
      this.addressForm.cityCode = value.join(',')
    },
    // 新增地址
    goAddAddress(state) {
      this.state = state
      this.isShowDialog = true
    },
    // 取消新增
    handleDialog() {
      this.isShowDialog = false
      this.addressForm = {}
      this.selectedOptions = []
    },
    // 确定新增地址
    addAddress() {
      console.log(this.addressForm)
      if (this.state) {
        // 修改地址
        update(this.addressForm)
          .then(res => {
            this.$confirm('是否确认修改地址?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              // 成功后关闭弹窗
              this.isShowDialog = false
              // 重新获取地址列表
              this.getAddressList()
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消修改'
              })
            })
          })
      } else {
        // 新增地址
        save(this.addressForm)
          .then(res => {
            // console.log(res)
            // 成功后关闭弹窗
            this.isShowDialog = false
            // 重新获取地址列表
            this.getAddressList()
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
